<template>
    <div id="app" @click.once="handlePlayBgm">
        <router-view></router-view>
        <!-- 日志窗口 -->
        <div v-show="showLog" class="mmv-log">
            <pre>{{ log }}</pre>
        </div>
    </div>
</template>

<script>
export default {
    name: 'App',
    computed: {
        log() {
            return {
                answer: this.$store.state.QuestionBank.nowQuestion.answer,
                socre: this.$store.state.QuestionBank.score,
                userInfo: this.$store.state.app.userInfo,
            };
        },
        showLog() {
            return this.log.userInfo.name == 'KujoMiva';
        },
    },
    created() {
        // 首次进入跳转至loading
        this.$router.replace({ name: 'App' }).catch(() => { });
        // 初始化答题次数
        this.$store.dispatch('app/handleInitGameNum');
        window.handleAddGameNum = () => this.$store.dispatch('app/handleAddGameNum');
    },
    methods: {
        handlePlayBgm() {
            const bgm = document.querySelector('#bgm');
            console.log(bgm);
            bgm.play();
        },
    },
};
</script>

<style lang="scss">
html,
body {
    @include scrollBar;
    background-color: $main;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}

#app {
    width: 100vw;
    height: 100vh;
    .mmv-log {
        position: fixed;
        width: 100vw;
        height: 17vw;
        bottom: 0;
        overflow: scroll;
        background: rgba($color: #000000, $alpha: 0.5);
        color: #fff;
        opacity: 0.5;
    }
}
</style>
